import React, { Component } from 'react';
import {Step} from 'iftide';
import {View,Text,StyleSheet} from 'react-native'

const stepIndicatorStyles = {
    stepIndicatorSize: 20,
    currentStepIndicatorSize:20,
    separatorStrokeWidth: 2,
    currentStepStrokeWidth: 5,
    stepStrokeWidth: 0,
    stepStrokeCurrentColor: '#FA5050',//red current border      当前选中的外圆环
    separatorFinishedColor: '#666666',//grey line
    separatorUnFinishedColor: '#D8D8D8',//grey line
    stepIndicatorFinishedColor: '#666666',//red finish background    已完成的中心圆圈
    stepIndicatorUnFinishedColor: '#D8D8D8',//grey unfinished background
    stepIndicatorCurrentColor: '#FA5050',//red current background            
    stepStrokeFinishedColor: '#666666',//red finshed border
    stepStrokeUnFinishedColor: '#D8D8D8',//grey unfinished border
    stepIndicatorLabelFontSize: 13,
    currentStepIndicatorLabelFontSize: 13,
    stepIndicatorLabelCurrentColor: '#FFFFFF',//red current font
    stepIndicatorLabelFinishedColor: '#FFFFFF',//red finshed font
    stepIndicatorLabelUnFinishedColor: '#ffffff',//grey unfinished font
    labelColor: '#333333',//!current majorLabel 
    labelSize: 13,
    currentStepLabelColor: '#333333',//current majorLabel 
    errorStepColor: '#FA5050', 
    isToLeft:false,   
    // 未选中的提示文本颜色
    minorLabelColor: '#666666', //!current minorLabel 
    // 当前选中的提示文本字体颜色
    currentMinorLabelColor: '#666666', //current minorLabel 
    // label的字体大小
    minorLabelSize: 11, 
};
export default class Basic extends Component{
    constructor(props) {
        super(props);
        this.state = {
            currentPage:1
        }
    }

    render() {
        const labels = [{
            majorLabel: '提交申请',
            minorLabel: '2017-03-01'
        },{
            majorLabel: '预审批通过',
            minorLabel: '2017-03-04'
        }];

        return (
            <View>
                <Step
                    customStyles={stepIndicatorStyles}
                    stepCount={2}
                    direction='horizontal'
                    currentPosition={this.state.currentPage}
                    labels={labels}
                />
            </View>
        );
    }
}